snowpack 事始め - I am Electrical machine

snowpack 事始め

https://www.snowpack.dev/

おもろそうだったので様子見

pika の系譜らしい

元々 @pika/web だったのが snowpack になったっぽい

シンプルに npm の module を web_modules 以下にバンドルしてくれて esm でロードできるようにしてくれるやつ、って感じか？

code:shell

y add preact

y add -D snowpack

snowpack

y add -D serve

serve

open http://localhost:5000

code:index.html

code:src/app.js

import { h, Component, render } from '/web_modules/preact.js'

const app = h('div', null, 'Helloooo')

render(app, document.getElementById('app'))

動く

https://gyazo.com/db72896c94d34c0fdf9ae2f1a8301143

code:shell

y add htm

snowpack

code:src/app.js

import { h, Component, render } from '/web_modules/preact.js'

import htm from '/web_modules/htm.js'

const html = htm.bind(h)

const app = html`

render(app, document.getElementById('app'))

動く

https://gyazo.com/9475beb6f20836000b60436f3f9cbe35

code:shell

y add csz

snowpack

code:src/app.js

import { h, Component, render } from '/web_modules/preact.js'

import htm from '/web_modules/htm.js'

import css from '/web_modules/csz.js'

const html = htm.bind(h)

const style = css`

color: #f00;

const app = html`

render(app, document.getElementById('app'))

動く

https://gyazo.com/3d2a42ec9f58e32714d5bde425bf5578

一応 netlify にデプロイするとこまでやった

https://gyazo.com/0a7e326c5fa726768cb662abeae24cd7

https://snowpack-sandbox.netlify.com/

snowpack

#20200108 #0108